<template>
  <div>
    <span 
      v-for="item in options" 
      :key="item.value" 
      :class="['tag-radio', item.value == value && 'selected']" 
      @click="handleValueChange(item.value)"
    >
      {{ item.label }}
    </span>
  </div>
</template>



<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
import { TagRadioOptions } from '.';
const props = defineProps({
  options: {
    type: Array as () => TagRadioOptions,
    required: true,
    default: () => []
  },
  value: {
    type: String as () => any,
    default: () => ''
  },
})



const emit = defineEmits<{
  (e: 'update:value', value: any): void;
}>();

function handleValueChange(value: any) {
  emit('update:value', value);
}

</script>


<style lang="less">
.tag-radio {
  font-size: 12px;
  color: #ccc;
  border: 1px #ccc solid;
  border-radius: 5px;
  padding: 7px 10px;
  display: inline-block;
  cursor: pointer;
  line-height: 1;
  position: relative;
  margin-left: 10px;
  transition: all .3s ease-in-out;
  &:first-child{
    margin-left: 0;
  }

  &:before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    border: 7px solid #3691ee;
    border-bottom-color: transparent;
    border-left-color: transparent;
    opacity: 0;
    transition: all .3s ease-in-out;
  }

  &:after {
    content: "";
    width: 2px;
    height: 5px;
    position: absolute;
    right: 1px;
    top: 0px;
    border: 1px solid #fff;
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(45deg);
    opacity: 0;
    transition: all .3s ease-in-out;
  }
}

.selected {
  border-color: #3691ee;
  color: #3691ee;

  &::after, &::before{
    opacity: 1;
  }
  
}
</style>